<!--显示部门-->
<template>
    <el-container style="height:850px;">
        <el-header>
            <el-row style="background-color: #001529">
                <el-col :span="6">
                    <div class="grid-content bg-purple">二哈租车后台管理系统</div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple-light" style="color: #2fb9d4">&nbsp;{{gettime}}</div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple" style="color: #2fb9d4">&nbsp;{{week}}</div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple-light">
                        <el-menu
                                :default-active="activeIndex2"
                                class="el-menu-demo"
                                mode="horizontal"
                                @select="handleSelect"
                                background-color="#001529"
                                text-color="#fff"
                                active-text-color="#ffd04b">
                            <el-submenu index="2">
                                <template slot="title">{{userName}}-{{realName}}</template>
                                <el-menu-item index="2-1" @click="toMyself()">个人中心</el-menu-item>
                                <el-menu-item index="2-2" @click="logout">退出</el-menu-item>
                            </el-submenu>
                            <el-menu-item index="4"><span @click="toHome()">首页</span></el-menu-item>
                        </el-menu>
                    </div>
                </el-col>
            </el-row>
        </el-header>
        <el-container style="height: 500px;">
            <el-aside width="200px">
                <img :src="userAvatar" class="userAvatar"
                     style="display: block;width: 80px;height: 80px;
                         border-radius: 50%;-webkit-border-radius: 50%;
                         -moz-border-radius: 50%;
                         border: 4px solid #44576b;box-sizing: border-box;margin: 10px auto 10px;">
                <p style=" display: block;width: 100%;height: 25px;color: #ffffff;text-align: center;font-size: 12px;white-space: nowrap;line-height: 25px;overflow: hidden;">
                    你好！<span class="userName">{{realName}}</span>, 欢迎回来
                </p>

                <!--左侧树-->
                <el-tree :data="data" :props="defaultProps"
                         default-expand-all
                         @node-click="handleNodeClick">
                </el-tree>
            </el-aside>

            <el-main style="width:600px;">
                <!-- <defaultTag/> -->
                <router-view/>
            </el-main>
        </el-container>
    </el-container>
</template>

<!--js-->
<script>
    // import defaultTag from '@/views/defaultTag.vue';
    // import DefaultTag from './defaultTag.vue';
    export default {
        data() {
            return {
                userAvatar:localStorage.getItem("avatar"),
                data: [],//树数据
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                //tabs 标签页
                editableTabsValue: '1',
                editableTabs: [{
                    title: '用户管理',
                    name: '1',
                    url: '/html/user/page.html'
                }],
                tabIndex: 1,
                activeIndex2: '1',
                gettime: '',//获取当前时间
                week: '',//星期几
                userInfo: {},
                userName: '',
                realName: '',
                headPic: '../assets/2.gif'
            };
        },
        components: {
            // defaultTag
        },
        created: function () {
            // this.$router.options.routes[1].children.push("/defaultTag");
            //动态菜单请求
            var userId = localStorage.getItem("id");
            var userName = localStorage.getItem("name");
            var loginName = localStorage.getItem("username");
            //this.headPic=localStorage.getItem("avatar");
            this.userName = userName;
            this.realName = loginName;

            // 登陆成功之后修改最后的登陆时间和IP
            this.$http.get("/ss/user/updateLoginTimeAndIp?userId="+userId).then(res=>{

            });

            let id = localStorage.getItem("id");
            let token = localStorage.getItem("token");
            let config = {
                method: 'get',
                url: '/ss/menu/queryMenuTreeByUserId?userId=' + id + ''
            };
            this.$http(config).then((response) => {

                this.data = response.data.t;
            });
            //动态路由请求
            let queryUrlIsNotNull = {
                method: 'get',
                url: 'ss/menu/queryUrlIsNotNull'
            };
            this.$http(queryUrlIsNotNull).then((response) => {

                let dataJson = response.data.t;
                if (dataJson != null && dataJson !== '') {
                    let routes = [];
                    //循环
                    dataJson.forEach(element => {
                        routes.push({
                            path: element.url,
                            name: element.menuName,
                            component: () => import('@/components' + element.url + '.vue')
                        });
                    });
                    // for (let i=0; i< dataJson.length;i++) {
                    //           routes.push({
                    //           //   path:menuList[i].url,
                    //           // name:menuList[i].menuName,
                    //           // component:() => import('@/views'+menuList[i].url+'.vue')
                    //            path: dataJson[i].url,
                    //            name: dataJson[i].menuName,
                    //            component: () => import('@/views'+dataJson[i].url+'.vue')
                    //           });
                    //    }
                    //给main追加子路由
                    this.$router.options.routes[0].children = routes;
                    //使路由生效
                    this.$router.addRoutes(this.$router.options.routes);

                }

            });
            this.currentTime();
            this.getWeek();
        },
        methods: {
            handleNodeClick(data) {

                if (data.url != null && data.url !== '' && data.url !== 'undefined') {
                    this.$router.push(data.url);
                }
            }, //头部导航获取当前时间
            getTime: function () {
                let currentDate = new Date();
                let yy = currentDate.getFullYear();
                let mm = currentDate.getMonth() + 1;
                let dd = currentDate.getDate();
                let hh = currentDate.getHours();
                let mf = currentDate.getMinutes() < 10 ? '0' + currentDate.getMinutes() : currentDate.getMinutes();
                let ss = currentDate.getSeconds() < 10 ? '0' + currentDate.getSeconds() : currentDate.getSeconds();
                this.gettime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss;
            },
            //每隔0.5秒调用getTime属性
            currentTime() {
                setInterval(this.getTime, 500)
            },
            //获取星期几
            getWeek() {
                //java String   "abc".charAt(1)  返回某一个字符串"abc"1位置上的字符
                //.getDay() 获取星期几的数字 0-6
                //.getDate() 获取档期日期的每月第几天   2020-03-12  12

                this.week = '星期' + "日一二三四五六".charAt(new Date().getDay());
            },
            //导航栏处理方法
            handleSelect(key, keyPath) {

            },
            // 个人中心
            toMyself(){
              this.$router.push('/personalCenter')
            },
            // 首页
            toHome(){
                this.$router.push('/home')
            },
            //退出
            logout() {
                localStorage.clear();
                this.$router.push('/');
            }
        }
    };
</script>
<!--css-->
<style>
    .el-header, .el-footer {
        background-color: #001529;
        color: #fff;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #324157;
        color: #333;
        text-align: center;
        line-height: 38px;
    }

    .el-tree {
        background-color: #324157;
        color: #fff;
    }

    .el-tree-node__content:hover {
        background-color: aqua
    }

    .el-tree-node__content:visited {
        background-color: aqua
    }

    .el-tree-node__content:active {
        background-color: aqua
    }


    .el-tree-node.is-current > .el-tree-node__content {
        background-color: #566e89 !important;
        color: #111111;
    }


</style>
